<template>
  <div class="overallTrend">
    <topBar :title="title"></topBar>
    <div class="main-wrap">
      <div class="character">
        <span class="lingxing"></span>{{ characterOne }}
      </div>
      <div class="character">
        <span class="lingxing"></span>{{ characterTwo }}
      </div>
    </div>
    <div class="echartBox">
      <div class="rightEchart">
        <div class="contentTitle">杭州码号收入趋势（万元）</div>
        <principalNumber :principal="principal"></principalNumber>
      </div>
    </div>
    <div class="tableBox">
      <el-table
        border
        stripe
        style="width: 100%"
        class="tableTh28"
        ref="table"
        :data="tableData"
        :cell-style="{ padding: '0px' }"
        :header-cell-style="{
          background: '#C00000',
          color: '#ffffff',
          padding: '0',
          height: '26px',
        }"
      >
        <el-table-column
          v-for="(item, index) in colList"
          :label="item"
          :prop="'totalData' + index"
          :key="index"
          align="center"
          :style="{ padding: '0px' }"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row['totalData' + index] < 0"
              style="color: red; font-weight: bold"
              >{{ scope.row["totalData" + index] || "-" }}</span
            >
            <span v-else style="color: #000000; font-weight: bold">{{
              scope.row["totalData" + index] || "-"
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        border
        stripe
        style="width: 100%"
        class="tableTh28"
        ref="table"
        :data="tableDataTwo"
        :cell-style="{ padding: '0px' }"
        :header-cell-style="{
          background: '#C00000',
          color: '#ffffff',
          padding: '0',
          height: '26px',
        }"
      >
        <el-table-column
          v-for="(item, index) in yearList"
          :label="item"
          :prop="'totalData' + index"
          :key="index"
          align="center"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row['totalData' + index] < 0"
              style="color: red; font-weight: bold"
              >{{ scope.row["totalData" + index] || "-" }}</span
            >
            <span v-else style="color: #000000; font-weight: bold">{{
              scope.row["totalData" + index] || "-"
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import topBar from "./topBar";
import principalNumber from "../showEchart/principalNumber";
import { overallTrend, overallTrendhb } from "@/api/codeIncome/analysis";
export default {
  name: "overallTrend",
  props: {
    searchData: {
      type: Object,
      default: {},
    },
  },
  watch: {
    searchData: {
      handler(newName) {
          this.getData();
          this.getTableData();
      },
      deep: true,
    },
  },
  components: {
    topBar,
    principalNumber,
  },
  data() {
    return {
      title: "码号收入整体趋势",
      characterOne: "",
      characterTwo: "",
      principal: {},
      colList: [],
      tableData: [],
      yearList: [],
      tableDataTwo: [],
    };
  },
  created() {},
  mounted() {
    this.getData();
    this.getTableData();
  },
  methods: {
    // 获取码号收入整体趋势
    getData() {
      overallTrend({
        acctMonth: this.searchData.acctMonth,
        areaId: this.searchData.areaId,
      }).then((res) => {
        if (res.code == 200) {
          this.characterOne = res.data.characterOne;
          this.characterTwo = res.data.characterTwo;
          let obj = {};
          obj["acctMonthS"] = res.data.acctMonthS;
          obj["incrementS"] = res.data.incrementS;
          obj["stockS"] = res.data.stockS;
          obj["wholeS"] = res.data.wholeS;
          this.principal = obj;
        }
      });
    },
    // 获取表格数据
    getTableData() {
      overallTrendhb({
        acctMonth: this.searchData.acctMonth,
        areaId: this.searchData.areaId,
      }).then((res) => {
        if (res.code == 200) {
          this.dealData(res.data);
          this.dealDataTwo(res.data);
        }
      });
    },
    dealData(data) {
      this.tableData = []
      let colList = [];
      colList = data.acctMonths.slice(0, 13);
      this.colList = colList;
      this.colList[0] = "";
      let arr0 = data.monthlyValues[0].slice(0, 13);
      let arr1 = data.monthlyValues[1].slice(0, 13);
      let tableArr = [];
      let tablearr = [];
      arr0.map((item) => {
        tableArr.push(item.indexValue);
      });
      arr1.map((item) => {
        tablearr.push(item.indexValue);
      });
      let date0 = {};
      let date1 = {};
      for (let i = 0; i < tableArr.length; i++) {
        date0["totalData" + i] = tableArr[i];
      }
      for (let i = 0; i < tablearr.length; i++) {
        date1["totalData" + i] = tablearr[i];
      }
      this.tableData.push(date0);
      this.tableData.push(date1);
    },
    dealDataTwo(data) {
      this.tableDataTwo = []
      let yearList = [];
      yearList = data.acctMonths.slice(13, data.acctMonths.length);
      this.yearList = yearList;
      this.yearList.unshift("");
      let arr0 = data.monthlyValues[0].slice(13, data.monthlyValues[0].length);
      let arr1 = data.monthlyValues[1].slice(13, data.monthlyValues[0].length);
      let tableArr = [];
      let tablearr = [];
      arr0.map((item) => {
        tableArr.push(item.indexValue);
      });
      arr1.map((item) => {
        tablearr.push(item.indexValue);
      });
      tableArr.unshift("整体收入");
      tablearr.unshift("环比");
      let date0 = {};
      let date1 = {};
      for (let i = 0; i < tableArr.length; i++) {
        date0["totalData" + i] = tableArr[i];
      }
      for (let i = 0; i < tablearr.length; i++) {
        date1["totalData" + i] = tablearr[i];
      }
      this.tableDataTwo.push(date0);
      this.tableDataTwo.push(date1);
    },
  },
};
</script>
<style scoped>
.overallTrend {
  box-sizing: border-box;
  padding: 20px;
  box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 15%);
}
.main-wrap {
  width: 100%;
  box-sizing: border-box;
  padding-left: 35px;
  padding-bottom: 20px;
}
.character {
  font-size: 20px;
  font-weight: bold;
}
.lingxing {
  width: 12px;
  height: 12px;
  background-color: #000000;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg); /* Internet Explorer */
  -moz-transform: rotate(45deg); /* Firefox */
  -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
  -o-transform: rotate(45deg); /* Opera */
  margin-right: 7px;
  display: inline-block;
}
.echartBox {
  margin-bottom: 30px;
}
.rightEchart {
  height: 300px;
}
.contentTitle {
  width: 100%;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #c00000;
  margin-bottom: 10px;
}
</style>
<style>
/* .el-table .el-table__header-wrapper th {
        background-color: #C00000 !important;
        color: #ffffff !important;
    } */
</style>
